<template>
  <div>
    <a-layout id="components-layout-demo-fixed-sider" style="min-height: 100vh">
      <f-sider></f-sider>
      <a-layout>
        <f-header></f-header>
        <a-row type="flex" style="flex: auto">
          <a-row>
            <f-articlesider></f-articlesider>
          </a-row>
          <a-layout-content
            :style="{ margin: '24px 16px 0', overflow: 'initial' }"
          >
            <div :style="{ padding: '24px', background: '#fff' }">
              <a-row type="flex" align="middle">
                <a-col :span="4">标题：</a-col>
                <a-col :span="12">
                  <a-input v-model="title" placeholder="请输入标题" />
                </a-col>
              </a-row>
              <a-row class="mt1rem" type="flex" align="middle">
                <a-col :span="4">文章分类：</a-col>
                <a-col :span="12">
                  <a-select
                    :defaultValue="article_cate_title"
                    style="width: 150px"
                    @change="articlecateChange"
                  >
                    <a-select-option
                      v-for="(items, index) in articlecate"
                      :key="index"
                      :value="items.catid"
                      >{{ items.article_cate_title }}</a-select-option
                    >
                  </a-select>
                </a-col>
              </a-row>
              <a-row class="mt1rem" type="flex" align="middle">
                <a-col :span="4">文章标签：</a-col>
                <a-col :span="12">
                  <a-select
                    mode="multiple"
                    style="width: 100%"
                    :placeholder="article_tag_tips"
                    @change="tagChange"
                  >
                    <a-select-option
                      v-for="(item, index) in articletag"
                      :key="index"
                      >{{ item.tag_name }}</a-select-option
                    >
                  </a-select>
                </a-col>
              </a-row>
              <a-row class="mt1rem" type="flex" align="middle">
                <a-col :span="4">简介：</a-col>
                <a-col :span="12">
                  <a-textarea
                    v-model="introduction"
                    placeholder="请输入简介"
                    :rows="4"
                  />
                </a-col>
              </a-row>
              <a-row class="mt1rem" type="flex" align="middle">
                <a-col :span="4">特色图片：</a-col>
                <a-col :span="12">
                  <div class="clearfix">
                    <a-upload
                      listType="picture-card"
                      :remove="handleRemove"
                      :beforeUpload="beforeUpload"
                    >
                      <div v-if="!fileList">
                        <a-icon :type="loading ? 'loading' : 'plus'" />
                        <div class="ant-upload-text">上传图片</div>
                      </div>
                    </a-upload>
                  </div>
                </a-col>
              </a-row>
              <a-row class="mt1rem" type="flex">
                <a-col :span="4">内容：</a-col>
                <a-col :span="12">
                  <div class="markdown margin-top-xs">
                    <mavon-editor
                      v-model="content"
                      ref="md"
                      @imgAdd="handleUploadImage"
                    />
                  </div>
                </a-col>
              </a-row>
              <div class="btn">
                <a-button type="primary" :loading="iconLoading" @click="save"
                  >添加</a-button
                >
                <a-button class="ml1rem" type="primary" @click="back"
                  >返回</a-button
                >
              </div>
            </div>
            <f-footer></f-footer>
          </a-layout-content>
        </a-row>
      </a-layout>
    </a-layout>
  </div>
</template>
<script>
import axios from "axios";
import articlesider from "../../components/layout/ArticleSider.vue";
import sider from "../../components/layout/Sider.vue";
import header from "../../components/layout/Header.vue";
import footer from "../../components/layout/Footer.vue";
import { baseURL } from "../../api/config.js";
// import E from "wangeditor";
export default {
  data() {
    return {
      // catid: "",
      iconLoading: false,
      loading: false,
      fileList: "",
      title: "",
      editor: null,
      fileid: 0,
      column_id: 0,
      catid: 0,
      introduction: "",
      content: "",
      page: 1,
      pageSize: 10,
      articlecate: [],
      articletag: [],
      article_tag_tips: "请选择文章标签",
      column: [],
      article_cate_title: "请选择文章分类",
      column_title: "请选择所属栏目",
    };
  },
  components: {
    "f-header": header,
    "f-sider": sider,
    "f-articlesider": articlesider,
    "f-footer": footer,
  },

  mounted() {
    this.$parent.tokenverify();
    this.getdata();
  },
  methods: {
    getdata() {
      this.catid = this.$route.query.catid;
      this.getarticlecate();
      this.getArticleTag();
      // this.getcolumn();
      this.setsiders();
    },
    //选择图片
    handleRemove(file) {
      const index = this.fileList.indexOf(file);
      const newFileList = this.fileList.slice();
      newFileList.splice(index, 1);
      this.fileList = newFileList;
    },
    beforeUpload(file) {
      this.fileList = file;
      return false;
    },
    upimg() {
      var token = localStorage.getItem("token");
      // const formData = new FormData();
      const formData = new FormData();
      formData.append("files[]", this.fileList);
      formData.append("token", token);
      this.saveFile(formData);
    },
    saveFile(formData) {
      axios({
        method: "post",
        url: baseURL + "Admin/file/uploadfile",
        data: formData,
      })
        .then((res) => {
          this.loading = false;
          if (res.code == 1) {
            this.imageUrl = res.data;
            this.fileid = res.fileid;
            setTimeout(this.upimages, 1);
            this.$message.success("图片上传成功");
            this.savecontent();
          } else if (res.code == 4001) {
            this.$router.push("/Auth/login");
            this.$message.warning("凭证失效，请重新登陆");
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    //上传图片
    save() {
      this.upimg();
    },
    //编辑器上传图片
    handleUploadImage(pos, files) {
      var token = localStorage.getItem("token");
      const formData = new FormData();
      formData.append("mypic[]", files);
      formData.append("token", token);
      axios({
        method: "post",
        url: baseURL + "Admin/file/editfileupload",
        data: formData,
      })
        .then((res) => {
          this.loading = false;
          if (res.errno == 0) {
            // this.imageUrl = res.data;
            this.$refs.md.$img2Url(pos, res.data);
            // 此处只做示例
            // insertImage({
            //   url: res.data,
            //   desc: ""
            // });
          } else if (res.code == 4001) {
            this.$router.push("/Auth/login");
            this.$message.warning("凭证失效，请重新登陆");
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    //提交内容
    savecontent() {
      const url = "/Admin/Article/addarticle";
      const paramObj = {
        catid: this.catid,
        title: this.title,
        fileid: this.fileid,
        introduction: this.introduction,
        content: this.content,
        token: localStorage.getItem("token"),
      };
      this.$server.sl("GET", url, paramObj).then((res) => {
        if (res.code == 1) {
          this.$message.success("添加成功");
          this.$router.go(-1);
        } else if (res.code == 4001) {
          this.$router.push("/Auth/login");
          this.$message.warning("凭证失效，请重新登陆");
        } else {
          this.$message.warning("添加失败，请刷新重试");
        }
      });
    },
    //自动保存
    OnSave: function ({ value }) {
      // console.log(value, theme);
      this.content = value;
    },

    //返回上一页
    back() {
      this.$router.go(-1);
    },
    //获取文章分类
    getarticlecate: function () {
      const url = "/Admin/Article/getAllArticleCate";
      const paramObj = {
        token: localStorage.getItem("token"),
      };
      this.$server.sl("GET", url, paramObj).then((res) => {
        if (res.code == 1) {
          this.articlecate = res.data;
        } else if (res.code == 4001) {
          this.$router.push("/Auth/login");
          this.$message.warning("凭证失效，请重新登陆");
        } else {
          this.$message.warning("获取文章分类失败，请刷新重试");
        }
      });
    },
    //获取文章标签
    getArticleTag: function () {
      const url = "/Admin/ArticleTag/getTagList";
      const paramObj = {
        page: this.page,
        pageSize: this.pageSize,
        token: localStorage.getItem("token"),
      };
      this.$server.sl("GET", url, paramObj).then((res) => {
        if (res.code == 1) {
          this.articletag = res.data;
        } else if (res.code == 4001) {
          this.$router.push("/Auth/login");
          this.$message.warning("凭证失效，请重新登陆");
        } else {
          this.$message.warning("获取文章分类失败，请刷新重试");
        }
      });
    },
    //选择文章分类
    articlecateChange: function (value) {
      this.catid = value;
    },
    //选择文章标签
    tagChange: function (value) {
      console.log(value);
    },
    //菜单选中设置
    setsiders() {
      this.$store.commit("updateselectedKeys", "5");
      this.$store.commit("updateSubmenu", "5-1");
    },
  },
};
</script>
<style scoped>
.mt1rem {
  margin-top: 1rem;
}
.ml1rem {
  margin-left: 1rem;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
.btn {
  margin-top: 10px;
}
</style>
